<template>
    <div class="mainCenter">
        <!-- <div class="title">登录记录</div>
        <template v-if="loginList">
        <div class="mainCenterBox">
            <div class="dayInfo" v-for="dayInfo in loginList" :key="dayInfo.date">
                <p class="date">{{dayInfo.date}}</p>
                <div class="infoBox" v-for="item in dayInfo.records">
                    <div class="left">
                        <div class="iconBox">
                            <el-icon><ChromeFilled /></el-icon>
                        </div>
                        <div class="info">
                            <p class="device">{{item.device}}</p>
                            <p class="address">{{item.address}}<span style="margin-left: 10px;">{{item.ip}}</span></p>
                        </div>
                    </div>
                    <div class="right">
                        <el-icon><Clock /></el-icon>{{item.time}}
                    </div>
                </div>
            </div>
        </div>
        </template>
        <template v-else> -->
            <Loading></Loading>
        <!-- </template> -->
    </div>
</template>

<script  lang="ts" setup>
// import Loading from '@/components/Loading.vue';
// import {reqGetLoginRecord} from '@/api/login'
// import {LoginRecordType} from '@/types/user'
// import { onMounted, ref } from 'vue';
// const loginList=ref<Array<LoginRecordType>>()

// const getLoginRecord=()=>{
//     reqGetLoginRecord('g123').then(res=>{
//         loginList.value=res.data.data
//         console.log(loginList.value);
//     })
// }

// onMounted(()=>{
//     getLoginRecord()
// })
</script>

<style scoped lang="scss">
.dayInfo {
    width: 100%;
    .date{
        color: #666883;
        font-weight: bold;
        padding: 20px 20px;
        box-sizing: border-box;
    }
    .infoBox {
        margin-bottom: 20px;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        border: 1px solid #ededed;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            display: flex;
            align-items: center;

            .iconBox {
                box-sizing: border-box;
                border: 1px solid #ededed;
                height: 50px;
                width: 50px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                .el-icon{
                    font-size: 40px;
                    color: #cccccc;
                }

            }
            .info{
                margin-left: 20px;
                .device{
                    font-size: 18px;
                    color: #666883;
                }
                .address{
                    margin-top: 10px;
                    color: #999999;
                    font-size: 14px;
                }
            }
        }
        .right{
            display: flex;
            align-items: center;
            color: #666883;
        }
    }
}
</style>